<template>
	<view class="house-list-page">
		<!-- 页面标题和操作栏 -->
		<view class="page-header">
			<view class="header-content">
				<text class="page-title">房源管理</text>
				<view class="header-actions">
					<button class="action-btn filter-btn" @click="toggleFilter">
						<uni-icons type="filters" size="16" color="#666"></uni-icons>
						筛选
					</button>
					<button class="action-btn add-btn" @click="goToAddHouse">
						<uni-icons type="plus" size="16" color="#fff"></uni-icons>
						新增房源
					</button>
				</view>
			</view>
		</view>

		<!-- 筛选面板 -->
		<view class="filter-panel" v-if="showFilter">
			<view class="filter-content">
				<view class="filter-group">
					<text class="filter-label">房源状态</text>
					<view class="filter-tags">
						<text 
							class="filter-tag" 
							:class="{ active: filterForm.status === '' }"
							@click="setFilterStatus('')"
						>
							全部
						</text>
						<text 
							v-for="status in statusOptions" 
							:key="status.value"
							class="filter-tag" 
							:class="{ active: filterForm.status === status.value }"
							@click="setFilterStatus(status.value)"
						>
							{{ status.text }}
						</text>
					</view>
				</view>

				<view class="filter-group">
					<text class="filter-label">房源类型</text>
					<view class="filter-tags">
						<text 
							class="filter-tag" 
							:class="{ active: filterForm.propertyType === '' }"
							@click="setFilterType('')"
						>
							全部
						</text>
						<text 
							v-for="type in propertyTypeOptions" 
							:key="type.value"
							class="filter-tag" 
							:class="{ active: filterForm.propertyType === type.value }"
							@click="setFilterType(type.value)"
						>
							{{ type.text }}
						</text>
					</view>
				</view>

				<view class="filter-group">
					<text class="filter-label">价格范围</text>
					<view class="price-range">
						<view class="price-input-group">
							<uni-easyinput 
								v-model="filterForm.minPrice" 
								placeholder="最低价"
								type="number"
								:inputBorder="false"
							/>
							<text class="range-separator">至</text>
							<uni-easyinput 
								v-model="filterForm.maxPrice" 
								placeholder="最高价"
								type="number"
								:inputBorder="false"
							/>
						</view>
					</view>
				</view>

				<view class="filter-actions">
					<button class="filter-action-btn reset-btn" @click="resetFilter">重置</button>
					<button class="filter-action-btn confirm-btn" @click="applyFilter">确定</button>
				</view>
			</view>
		</view>

		<!-- 统计信息 -->
		<view class="stats-section">
			<scroll-view class="stats-scroll" scroll-x>
				<view class="stats-container">
					<view 
						class="stat-item" 
						:class="{ active: filterForm.status === '' }"
						@click="setFilterStatus('')"
					>
						<text class="stat-number">{{ houseStats.total }}</text>
						<text class="stat-label">全部房源</text>
					</view>
					<view 
						class="stat-item" 
						:class="{ active: filterForm.status === 1 }"
						@click="setFilterStatus(1)"
					>
						<text class="stat-number">{{ houseStats.forSale }}</text>
						<text class="stat-label">待售</text>
					</view>
					<view 
						class="stat-item" 
						:class="{ active: filterForm.status === 2 }"
						@click="setFilterStatus(2)"
					>
						<text class="stat-number">{{ houseStats.reserved }}</text>
						<text class="stat-label">已预订</text>
					</view>
					<view 
						class="stat-item" 
						:class="{ active: filterForm.status === 3 }"
						@click="setFilterStatus(3)"
					>
						<text class="stat-number">{{ houseStats.sold }}</text>
						<text class="stat-label">已售</text>
					</view>
					<view 
						class="stat-item" 
						:class="{ active: filterForm.isRecommend }"
						@click="toggleRecommendFilter"
					>
						<text class="stat-number">{{ houseStats.recommended }}</text>
						<text class="stat-label">推荐房源</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-section">
			<uni-search-bar 
				@confirm="searchHouses" 
				@input="onSearchInput"
				placeholder="搜索房源名称、楼栋号、房号"
				radius="20"
				clearButton="auto"
				cancelButton="none"
				bgColor="#f8f9fa"
			></uni-search-bar>
		</view>

		<!-- 房源列表 -->
		<view class="house-list-section">
			<scroll-view class="list-container" scroll-y @scrolltolower="loadMoreHouses">
				<view class="house-list">
					<view 
						class="house-card" 
						v-for="house in houseList" 
						:key="house._id"
						@click="viewHouseDetail(house)"
					>
						<view class="card-header">
							<view class="house-title">
								<text class="house-name">{{ house.propertyName }}</text>
								<text class="house-code">{{ house.propertyCode }}</text>
							</view>
							<view class="house-status" :class="house.statusClass">
								{{house.statusText}}
							</view>
						</view>

						<view class="card-content">
							<view class="house-image-container">
								<image 
									:src="house.images && house.images.length > 0 ? house.images[0] : '/static/default-house.jpg'" 
									class="house-image"
									mode="aspectFill"
								></image>
								<view v-if="house.isRecommend" class="recommend-badge">
									<uni-icons type="star-filled" size="16" color="#fff"></uni-icons>
									<text>推荐</text>
								</view>
							</view>

							<view class="house-details">
								<view class="detail-row">
									<text class="detail-label">位置</text>
									<text class="detail-value">{{ house.buildingNumber }}栋{{ house.unitNumber || '' }}单元{{ house.roomNumber }}室</text>
								</view>
								<view class="detail-row">
									<text class="detail-label">户型面积</text>
									<text class="detail-value">{{ house.roomLayout || '暂无' }} | {{ house.area }}㎡</text>
								</view>
								<view class="detail-row">
									<text class="detail-label">朝向装修</text>
									<text class="detail-value">{{ getOrientationText(house.orientation) }} | {{ getDecorationText(house.decoration) }}</text>
								</view>
								<view class="detail-row">
									<text class="detail-label">负责顾问</text>
									<text class="detail-value">{{ house.consultantName || '未分配' }}</text>
								</view>
							</view>
						</view>

						<view class="card-footer">
							<view class="price-info">
								<text class="total-price">￥{{ formatPrice(house.totalPrice) }}</text>
								<text class="unit-price">{{ house.unitPrice }}元/㎡</text>
							</view>
							<view class="action-buttons">
								<button class="action-btn edit-btn" @click.stop="editHouse(house)">
									<uni-icons type="compose" size="16" color="#fff"></uni-icons>
									编辑
								</button>
								<button class="action-btn view-btn" @click.stop="viewHouseDetail(house)">
									详情
								</button>
							</view>
						</view>

						<view class="card-meta">
							<text class="meta-item">带看 {{ house.viewCount }}次</text>
							<text class="meta-item">收藏 {{ house.favoriteCount }}次</text>
							<text class="meta-item">{{ formatTime(house.updateTime) }}</text>
						</view>
					</view>
				</view>

				<uni-load-more 
					:status="loadStatus" 
					:content-text="{
						contentdown: '上拉加载更多',
						contentrefresh: '加载中',
						contentnomore: '没有更多房源了'
					}"
				></uni-load-more>

				<view v-if="houseList.length === 0 && !loading" class="empty-state">
					<image src="/static/empty-house.png" class="empty-image" mode="aspectFit"></image>
					<text class="empty-text">暂无房源数据</text>
					<text class="empty-desc">点击右上角按钮添加房源</text>
				</view>
			</scroll-view>
		</view>

		<!-- 加载遮罩 -->
		<view v-if="loading" class="loading-mask">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 筛选相关
				showFilter: false,
				filterForm: {
					status: '',
					propertyType: '',
					minPrice: '',
					maxPrice: '',
					isRecommend: false
				},
				
				// 房源数据
				houseList: [],
				houseStats: {
					total: 0,
					forSale: 0,
					reserved: 0,
					sold: 0,
					recommended: 0
				},
				
				// 分页相关
				loadStatus: 'more',
				pageSize: 10,
				currentPage: 1,
				loading: false,
				searchKeyword: '',
				
				// 选项数据
				statusOptions: [
					{ value: 1, text: '待售' },
					{ value: 2, text: '已预订' },
					{ value: 3, text: '已售' },
					{ value: 4, text: '停售' }
				],
				propertyTypeOptions: [
					{ value: 1, text: '住宅' },
					{ value: 2, text: '商铺' },
					{ value: 3, text: '写字楼' },
					{ value: 4, text: '别墅' },
					{ value: 5, text: '公寓' },
					{ value: 6, text: '车位' }
				]
			}
		},
		onLoad() {
			this.loadHouseData();
		},
		onPullDownRefresh() {
			this.refreshHouseData();
		},
		onReachBottom() {
			if (this.loadStatus === 'more') {
				this.loadMoreHouses();
			}
		},
		methods: {
			// 加载房源数据
			async loadHouseData() {
				this.loading = true;
				try {
					await Promise.all([
						this.loadHouseList(),
						this.loadHouseStats()
					]);
				} catch (err) {
					console.error('加载房源数据失败:', err);
				} finally {
					this.loading = false;
				}
			},
			
			// 刷新房源数据
			async refreshHouseData() {
				this.currentPage = 1;
				this.houseList = [];
				await this.loadHouseData();
				uni.stopPullDownRefresh();
			},
			
			// 加载房源列表
			async loadHouseList() {
				try {
					const params = {
						page: this.currentPage,
						pageSize: this.pageSize
					};
					
					// 添加筛选条件
					if (this.filterForm.status) {
						params.status = this.filterForm.status;
					}
					if (this.filterForm.propertyType) {
						params.propertyType = this.filterForm.propertyType;
					}
					if (this.filterForm.minPrice) {
						params.minPrice = this.filterForm.minPrice;
					}
					if (this.filterForm.maxPrice) {
						params.maxPrice = this.filterForm.maxPrice;
					}
					if (this.filterForm.isRecommend) {
						params.isRecommend = true;
					}
					if (this.searchKeyword) {
						params.keyword = this.searchKeyword;
					}
					
					const res = await this.$cloudOBjAjax('sunny-house', 'getHouseList', params);
					if(res.data && res.data.length){
						res.data.map(item=>{
							item.statusClass = this.getStatusClass(item.status)
							item.statusText = this.getStatusText(item.status)
							return item
						})
					}
					if (this.currentPage === 1) {
						this.houseList = res.data;
					} else {
						this.houseList = [...this.houseList, ...res.data];
					}
					
					this.loadStatus = res.data.length < this.pageSize ? 'noMore' : 'more';
				} catch (err) {
					console.error('加载房源列表失败:', err);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			},
			
			// 加载房源统计
			async loadHouseStats() {
				try {
					const res = await this.$cloudOBjAjax('sunny-house', 'getHouseStats');
					this.houseStats = res.data;
				} catch (err) {
					console.error('加载房源统计失败:', err);
				}
			},
			
			// 加载更多房源
			async loadMoreHouses() {
				this.currentPage++;
				await this.loadHouseList();
			},
			
			// 搜索房源
			searchHouses(e) {
				this.searchKeyword = e.value;
				this.currentPage = 1;
				this.loadHouseList();
			},
			
			onSearchInput(e) {
				this.searchKeyword = e.value;
			},
			
			// 筛选相关方法
			toggleFilter() {
				this.showFilter = !this.showFilter;
			},
			
			setFilterStatus(status) {
				this.filterForm.status = status;
				this.applyFilter();
			},
			
			setFilterType(type) {
				this.filterForm.propertyType = type;
				this.applyFilter();
			},
			
			toggleRecommendFilter() {
				this.filterForm.isRecommend = !this.filterForm.isRecommend;
				this.applyFilter();
			},
			
			applyFilter() {
				this.showFilter = false;
				this.currentPage = 1;
				this.loadHouseList();
			},
			
			resetFilter() {
				this.filterForm = {
					status: '',
					propertyType: '',
					minPrice: '',
					maxPrice: '',
					isRecommend: false
				};
				this.applyFilter();
			},
			
			// 导航方法
			goToAddHouse() {
				uni.navigateTo({
					url: '/pages/house/edit'
				});
			},
			
			editHouse(house) {
				uni.navigateTo({
					url: `/pages/house/edit?id=${house._id}`
				});
			},
			
			viewHouseDetail(house) {
				uni.navigateTo({
					url: `/pages/house/detail?id=${house._id}`
				});
			},
			
			// 工具方法
			getStatusText(status) {
				const statusMap = {
					1: '待售', 2: '已预订', 3: '已售', 4: '停售', 5: '已租'
				};
				return statusMap[status] || '未知';
			},
			
			getStatusClass(status) {
				const classMap = {
					1: 'status-for-sale',
					2: 'status-reserved', 
					3: 'status-sold',
					4: 'status-off-sale',
					5: 'status-rented'
				};
				return classMap[status] || 'status-unknown';
			},
			
			getOrientationText(orientation) {
				const orientationMap = {
					1: '东', 2: '南', 3: '西', 4: '北',
					5: '东南', 6: '东北', 7: '西南', 8: '西北'
				};
				return orientationMap[orientation] || '未知';
			},
			
			getDecorationText(decoration) {
				const decorationMap = {
					1: '毛坯', 2: '简装', 3: '精装', 4: '豪装'
				};
				return decorationMap[decoration] || '未知';
			},
			
			formatPrice(price) {
				if (!price) return '0';
				if (price >= 10000) {
					return (price / 10000).toFixed(1) + '万';
				}
				return price.toLocaleString();
			},
			
			formatTime(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const now = new Date();
				const diff = now - date;
				const days = Math.floor(diff / (1000 * 60 * 60 * 24));
				
				if (days === 0) {
					return '今天更新';
				} else if (days === 1) {
					return '昨天更新';
				} else if (days < 7) {
					return `${days}天前更新`;
				} else {
					return `${date.getMonth() + 1}月${date.getDate()}日更新`;
				}
			}
		}
	}
</script>

<style scoped>
	.house-list-page {
		background-color: #f8f9fa;
		min-height: 100vh;
	}
	
	/* 页面头部 */
	.page-header {
		background: #fff;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.header-actions {
		display: flex;
		gap: 20rpx;
	}
	
	.action-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		border: none;
		border-radius: 12rpx;
		padding: 16rpx 24rpx;
		font-size: 26rpx;
		font-weight: 500;
	}
	
	.filter-btn {
		background: #f8f9fa;
		color: #666;
		border: 1rpx solid #e9ecef;
	}
	
	.add-btn {
		background: #ff6b35;
		color: #fff;
	}
	
	/* 筛选面板 */
	.filter-panel {
		background: #fff;
		border-bottom: 1rpx solid #f0f0f0;
		animation: slideDown 0.3s ease;
	}
	
	@keyframes slideDown {
		from { opacity: 0; transform: translateY(-20rpx); }
		to { opacity: 1; transform: translateY(0); }
	}
	
	.filter-content {
		padding: 30rpx;
	}
	
	.filter-group {
		margin-bottom: 40rpx;
	}
	
	.filter-label {
		display: block;
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.filter-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}
	
	.filter-tag {
		padding: 16rpx 32rpx;
		background: #f8f9fa;
		color: #666;
		border-radius: 20rpx;
		font-size: 26rpx;
		transition: all 0.3s;
	}
	
	.filter-tag.active {
		background: #ff6b35;
		color: #fff;
	}
	
	.price-range {
		margin-top: 10rpx;
	}
	
	.price-input-group {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.range-separator {
		color: #666;
		font-size: 28rpx;
		flex-shrink: 0;
	}
	
	.filter-actions {
		display: flex;
		gap: 20rpx;
		margin-top: 40rpx;
	}
	
	.filter-action-btn {
		flex: 1;
		border: none;
		border-radius: 12rpx;
		padding: 24rpx;
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.reset-btn {
		background: #f8f9fa;
		color: #666;
		border: 1rpx solid #e9ecef;
	}
	
	.confirm-btn {
		background: #ff6b35;
		color: #fff;
	}
	
	/* 统计信息 */
	.stats-section {
		background: #fff;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.stats-scroll {
		white-space: nowrap;
	}
	
	.stats-container {
		display: inline-flex;
		gap: 30rpx;
		padding: 0 30rpx;
	}
	
	.stat-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #f8f9fa;
		border-radius: 16rpx;
		min-width: 140rpx;
		transition: all 0.3s;
	}
	
	.stat-item.active {
		background: #ff6b35;
	}
	
	.stat-item.active .stat-number,
	.stat-item.active .stat-label {
		color: #fff;
	}
	
	.stat-number {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff6b35;
		margin-bottom: 8rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #666;
	}
	
	/* 搜索栏 */
	.search-section {
		background: #fff;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	/* 房源列表 */
	.house-list-section {
		flex: 1;
		padding: 30rpx;
	}
	
	.list-container {
		height: calc(100vh - 400rpx);
	}
	
	.house-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}
	
	.house-title {
		flex: 1;
	}
	
	.house-name {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}
	
	.house-code {
		font-size: 24rpx;
		color: #999;
		background: #f8f9fa;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}
	
	.house-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		color: #fff;
		flex-shrink: 0;
	}
	
	.status-for-sale { background: #52c41a; }
	.status-reserved { background: #fa8c16; }
	.status-sold { background: #ff4d4f; }
	.status-off-sale { background: #666; }
	.status-rented { background: #1890ff; }
	
	.card-content {
		display: flex;
		gap: 24rpx;
		margin-bottom: 24rpx;
	}
	
	.house-image-container {
		position: relative;
		width: 200rpx;
		height: 150rpx;
		border-radius: 12rpx;
		overflow: hidden;
		flex-shrink: 0;
	}
	
	.house-image {
		width: 100%;
		height: 100%;
	}
	
	.recommend-badge {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		background: #ff6b35;
		color: #fff;
		padding: 6rpx 12rpx;
		border-radius: 20rpx;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		gap: 4rpx;
	}
	
	.house-details {
		flex: 1;
	}
	
	.detail-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 0;
		border-bottom: 1rpx solid #f8f9fa;
	}
	
	.detail-row:last-child {
		border-bottom: none;
	}
	
	.detail-label {
		font-size: 26rpx;
		color: #666;
		flex-shrink: 0;
		width: 140rpx;
	}
	
	.detail-value {
		font-size: 26rpx;
		color: #333;
		flex: 1;
		text-align: right;
	}
	
	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f8f9fa;
	}
	
	.price-info {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}
	
	.total-price {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff6b35;
	}
	
	.unit-price {
		font-size: 24rpx;
		color: #999;
	}
	
	.action-buttons {
		display: flex;
		gap: 16rpx;
	}
	
	.action-buttons .action-btn {
		padding: 12rpx 24rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
	}
	
	.edit-btn {
		background: #1890ff;
		color: #fff;
	}
	
	.view-btn {
		background: #f8f9fa;
		color: #666;
		border: 1rpx solid #e9ecef;
	}
	
	.card-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		border-top: 1rpx solid #f8f9fa;
	}
	
	.meta-item {
		font-size: 22rpx;
		color: #999;
	}
	
	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
		text-align: center;
	}
	
	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
		opacity: 0.6;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-bottom: 16rpx;
	}
	
	.empty-desc {
		font-size: 26rpx;
		color: #ccc;
	}
	
	/* 加载遮罩 */
	.loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}
</style>